<template>
    <div>
        <!-- 搜索栏 -->
        <div style="margin: 5px;text-align: center;">
            <el-input v-model="name" @click.enter.native="loadPost()" placeholder="请输入名称"
                style="width: 200px;margin-left: 5px;;" prefix-icon="el-icon-search"></el-input>
            <el-select v-model="type" @change="loadPost()" placeholder="请选择字典类型"
                style="width: 200px;margin-left: 5px;;">
                <el-option v-for="item in typeData" :key="item.id" :label="item.value" :value="item.value"></el-option>
            </el-select>

            <el-button type="success" icon="el-icon-search" @click="loadPost()" circle
                style="margin-left: 5px;"></el-button>
            <el-button type="success" icon="el-icon-refresh" @click="resetParam" circle
                style="margin-left: 5px;"></el-button>
            <el-button type="primary" icon="el-icon-plus" @click="add" circle style="margin-left: 5px;"
                v-if="hasAuth('system:dict-save')"></el-button>
            <el-button type="danger" icon="el-icon-delete" @click="delHandle(null)" circle style="margin-left: 5px;"
                v-if="hasAuth('system:dict-delete')" :disabled="delBtnStatus"></el-button>

        </div>
        <el-table :data="tableData" ref="multipleTable" tooltip-effect="dark" border style="width: 100%" stripe
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>


            <el-table-column label="字典名称" prop="name" align="center">
            </el-table-column>
            <el-table-column label="字典值" prop="value" align="center">
            </el-table-column>

            <el-table-column label="字典类型" prop="type" align="center">
            </el-table-column>


            <el-table-column label="操作" width="300" align="center" fixed="right">
                <template v-slot="scope">
                    <div v-if="scope.row.role != 1">
                        <el-button type="success" icon="el-icon-edit" @click="mod(scope.row)" circle
                            v-if="hasAuth('system:dict-update')" style="margin-left: 5px;"></el-button>
                        <el-button type="danger" icon="el-icon-delete" @click="delHandle(scope.row.id)" circle
                            style="margin-left: 5px;" v-if="hasAuth('system:dict-delete')"></el-button>



                    </div>

                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
            :page-size="pageSize" :page-sizes="[5, 20, 50, 100, 1000]" background
            layout="total,sizes,prev, pager, next,jumper" :total="total">
        </el-pagination>
        <el-dialog title="资讯表单" :visible.sync="dialogVisible" width="80%" center>
            <el-form :model="form" ref="form" label-width="100px" :rules="rules"
                style="width: 800px;margin: 10px auto;;" enctype="multipart/form-data">

                <el-form-item label="字典名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入字典名称" style="width: 600px;"></el-input>
                </el-form-item>
                <el-form-item label="字典值" prop="value">
                    <el-input v-model="form.value" placeholder="请输入字典值" style="width: 600px;"></el-input>
                </el-form-item>
                <el-form-item label="字典类型" prop="type" v-if="form.update == 0">
                    <el-input v-model="form.type" placeholder="请输入字典类型" style="width: 600px;"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Dict',
    data() {
        return {
            user: JSON.parse(localStorage.getItem('CurUser')),
            tableData: [],

            total: 0,
            pageSize: 5,
            pageNum: 1,
            delBtnStatus: true,
            multipleSelection: [],
            name: '',
            type: '',
            typeData: [
            ],

            dialogVisible: false,
            form: {
                name: '',
                value: '',
                type: '',
                update: 0,
                id: '',
            },
            rules: {
                name: [
                    { required: true, message: '请输入字典名称', trigger: 'blur' }
                ],
                value: [
                    { required: true, message: '请输入字典值', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请输入字典类型', trigger: 'blur' }
                ],


            },

        }
    },
    methods: {
        resetParam() {
            this.name = ''
            this.type = ''
        },
        loadPost() {
            this.$axios.post('/dict/listPage',
                {
                    pageSize: this.pageSize,
                    pageNum: this.pageNum,
                    param: {
                        name: this.name + '',
                        type: this.type + ''

                    }
                }).then(res => {
                   
                    if (res.code == 200) {
                        this.tableData = res.data
                        // console.log(res.data)
                        if (res.data.length == 0 && this.pageNum != 1) {
                            this.pageNum = 1;
                            this.loadPost()
                        }
                        this.total = res.total
                    }
                })
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.pageNum = 1
            this.loadPost()
        },
        handleCurrentChange(val) {
            this.pageNum = val
            this.loadPost()
        },

        add() {
            this.resetForm()
            this.dialogVisible = true

        },
        mod(row) {
            this.$axios.get('/dict/info/' + row.id).then(res => {
                this.form = res.data.data

                this.dialogVisible = true
            })

        },
        save() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    if (this.form.id) {
                        this.doMod()
                    } else {
                        this.doSave()
                    }
                } else {
                    this.$message({
                        message: '校验失败',
                        type: 'warning'
                    })
                }
            })
        },
        doMod() {
            this.$axios.post('/dict/update', this.form).then(res => {
               
                if (res.code == 200) {
                    this.$message.success({
                        message: '修改成功',
                        type: 'success',
                        onClose: () => {
                            this.loadPost()
                            this.dialogVisible = false
                            this.resetForm()
                        }
                    })
                } else {
                    this.$message({
                        message: '修改失败',
                        type: 'error'
                    })
                }
            })

        },
        doSave() {
            this.$axios.post('/dict/save', this.form).then(res => {
               
                if (res.code == 200) {
                    this.$message.success({
                        message: '新增成功',
                        type: 'success',
                        onClose: () => {
                            this.loadPost()
                            this.dialogVisible = false
                            this.resetForm()
                        }
                    })
                } else {
                    this.$message({
                        message: '新增失败',
                        type: 'error'
                    })
                }
            })
        },
        resetForm() {
            this.form = {
                name: '',
                value: '',
                type: '',
                update: 0,
                id: '',
            }
        },

        handleSelectionChange(val) {
            this.multipleSelection = val
            this.delBtnStatus = val.length == 0
        },
        delHandle(id) {
            var ids = []
            if (id) {
                //单删
                ids.push(id)
            } else {
                //批量删
                this.multipleSelection.forEach(item => {
                    ids.push(item.id)
                })
            }
            this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.post('/dict/deleteBatch', ids, {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(res => {
                   
                    if (res.code == 200) {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        this.loadPost()
                    } else {
                        this.$message({
                            message: '删除失败',
                            type: 'error'
                        })
                    }
                })
            }).catch(() => {
                this.$message({
                    message: '已取消',
                    type: 'info'
                })
            })
        },
        getType() {
            this.$axios.get('/dict/type').then(res => {
               
                console.log(res)
                this.typeData = res
                this.type = this.typeData.length > 0 ? this.typeData[0].value : ''
                this.loadPost()
            })
        }
    },
    computed: {
        ...mapGetters([
            'hasAuth'
        ])
    }, mounted() {
        this.getType()
        this.loadPost()
    },
}
</script>
<style scoped>
.el-pagination {
    text-align: center;
    margin-top: 22px;
}
</style>